import React, { useEffect, useState } from 'react'
import "./Job.scss"
import { useNavigate } from 'react-router-dom'
import { NavBar, SearchBar, Button, Toast } from 'antd-mobile'
import { DeleteOutline, CloseOutline } from 'antd-mobile-icons'

export default function Search() {
  const navigate = useNavigate()
  const [history, setHistory] = useState(localStorage.getItem('history') ? JSON.parse(localStorage.getItem('history')) : [])
  const [postName, setPostName] = useState('')
  const [tuijian, setTuijian] = useState(["JAVA高级", "工程师", "UX设计师", "python", "项目经理", "开发"])

  const back = () => {
    navigate('/app/job')
  }

  const search = () => {
    if (postName == '' && companyName == '') {
      Toast.show('请输入关键字')
    } else {
      //最多保存十条
      if (history.length <= 10) {
        setHistory([...history, postName])
        localStorage.setItem('history', JSON.stringify([...history, postName]))
        setPostName('')
        navigate('/outcome?postName=' + postName)
      } else {
        //删除第一条数据
        history.shift()
        setHistory([...history, postName])
        localStorage.setItem('history', JSON.stringify([...history, postName]))
        setPostName('')
      }
    }
  }

  //清除历史记录
  const delAll = () => {
    localStorage.removeItem('history')
    setHistory([])
    Toast.show('删除成功')
  }

  //点击历史记录搜索
  const sou = (index) => {
    navigate('/outcome?postName=' + history[index])
  }

  //删除单个历史记录
  const del = (index) => {
    history.splice(index, 1)
    localStorage.setItem('history', JSON.stringify(history))
    setHistory([...history])
    Toast.show('删除成功')
  }

  return (
    <div className='search'>
      {/* 头部 */}
      <div className='search-top'>
        <NavBar onBack={back}>公司职位</NavBar>
      </div>
      {/* 搜索框 */}
      <div className='search-body'>
        <SearchBar className='search-bar' placeholder="请输入关键字" value={postName} onChange={(e) => {
          setPostName(e)
        }} />
      </div>
      {/* 历史记录 */}
      <div className='search-content'>
        <div className='search-content-top'>
          <div>历史记录</div>
          <div><DeleteOutline onClick={() => {
            delAll()
          }} /></div>
        </div>
      </div>

      {/* 历史记录列表 */}
      <div className='search-history'>
        {
          history.map((item, index) => {
            return <div className='item' key={index}>
              <span onClick={() => {
                sou(index)
              }} >{item}</span>
              <CloseOutline onClick={() => {
                del(index)
              }} />
            </div>
          })
        }
      </div>

      {/* 为您推荐 */}
      <div className='tuijian'>
        <div className='tuijian-top'>
          <span>为您推荐</span>
        </div>
        <div className='tuijian-bottom'>
          {
            tuijian.map((item, index) => {
              return <div className='item' key={index} onClick={() => {
                navigate('/outcome?postName=' + item)
                localStorage.setItem('history', JSON.stringify([...history, item]))
              }} >
                <span>{item}</span>
              </div>
            })
          }
        </div>
      </div>

      {/* 搜索按钮 */}
      <div className='search-bottom'>
        <Button block color='primary' size='large' className='search-btn' onClick={() => {
          search()
        }} >
          搜索
        </Button>
      </div>
    </div>
  )
}
